<script setup lang="ts" name="repair-repairs">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
  computed,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import {
  deviceCount,
  detectionLog,
  deviceList,
  deviceLog,
  getDeviceLoglist,
} from "@/api/server_repair";
import * as echarts from "echarts";
import type { ElForm } from "element-plus";

const router = useRouter();
const go = () => {
  router.push({ name: "page2", params: { a: 1 } });
};
const deviceCountInfo = ref<any>({
  monthReport: {},
  sevenDayReport: {},
  todayReport: {},
  yearReport: {},
});
const deviceLogInfoForm = ref<any>({
  page: 1,
  pageSize: 10,
});
const deviceLogRecordInfoToast = ref(0);
const deviceCountInfoTab = ref("todayReport");
const deviceCountInfoTabList = reactive({
  todayReport: "今日",
  sevenDayReport: "7日",
  monthReport: "30日",
  yearReport: "今年",
});
const getDeviceCount = async () => {
  let res = await deviceCount({});
  if (res.result == "success") {
    deviceCountInfo.value = res;
  }
};
const deviceLogForm = ref<any>({
  page: 1,
  pageSize: 10,
  type: "year",
  status: "",
});
const deviceLogDialogTitle = ref();
const deviceLogDialogVisible = ref(false);
const deviceLogRecordInfo = ref<any>([]);
const activeNames = ref();
const innerVisible = ref(false);
const deviceLogList = ref<any[]>([]);
const deviceLogTatal = ref(0);
const statusMap = reactive<any>({
  normal: "正常",
  repairing: "维修中",
  broken: "报废",
});
const getDeviceLogInfo = (status: string) => {
  let mapTitle: any = {
    todayReport: "今日",
    sevenDayReport: "7日",
    monthReport: "30日",
    yearReport: "今年",
  };
  deviceLogForm.value.page = 1;
  deviceLogForm.value.type = deviceCountInfoTab.value.replace("Report", "");
  deviceLogForm.value.status = status;
  deviceLogDialogTitle.value = mapTitle[deviceCountInfoTab.value];
  deviceLogDialogVisible.value = true;
  getDeviceLog();
};
const getDeviceLog = async () => {
  let res = await deviceList({
    ...deviceLogForm.value,
  });

  if (res.result == "success") {
    deviceLogList.value = res.list;
    deviceLogTatal.value = Number(res.total);
    console.log("res.value", deviceLogList.value);
  }
};

const deviceLogRecord = async (data: any) => {
  innerVisible.value = true;
  deviceLogRecordInfo.value = [];
  let res = await deviceLog({
    id: data.device_log_id,
    ...deviceLogInfoForm.value,
  });
  if (res.result == "success") {
    deviceLogRecordInfo.value = res.list;
    deviceLogRecordInfoToast.value = Number(res.total);
  }
};
const deviceLogInfoHandleCurrentChange = (page: number) => {
  deviceLogInfoForm.value.page = page;
};
const deviceLogHandleCurrentChange = (page: number) => {
  deviceLogForm.page = page;
  getDeviceLog();
};
const activeName = ref("0");
const handleClick = (tab: any) => {
  console.log(tab);
};
onMounted(() => {
  getDeviceLog();
  let elId: any = document.getElementById("customerChart");
  let myChart = echarts.init(elId);
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {
      textStyle: {
        color: "#fff",
      },
      inactiveColor: "#666",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: ["8-5", "8-6", "8-7", "8-8", "8-9", "8-10", "8-11"],
    },
    series: [
      {
        name: "已维修",
        type: "bar",

        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [32, 45, 28, 9, 15, 16, 19],
      },
      {
        name: "未维修",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [7, 16, 6, 48, 9, 21, 6],
      },
      {
        name: "报修总数",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [39, 61, 34, 57, 24, 37, 25],
      },
    ],
  });
});

// 列表搜索
const formitem = ref({
  input1: "",
  input2: "",
  input3: "",
  input4: "",
  input5: "",
});
const getDeviceLogitem = async () => {
  let res: any = await getDeviceLoglist({
    brand: '',
    spec: '',
    start: '',
    end: '',
    deptId: '33',
    // brand: formitem.value.input1,
    // spec: formitem.value.input2,
    // start: formitem.value.input3,
    // end: formitem.value.input4,
    // deptId: formitem.value.input5,
  });
 
console.log('reslist',res);

  // if (res.result == "success") {
  //   deviceLogList.value = res.list;
  //   deviceLogTatal.value = Number(res.total);
  //   console.log("res.value", deviceLogList.value);
  // }
};
const getsearch = () => {
  getDeviceLogitem()
  getDeviceLog();
  console.log('data',formitem.value);
};

// const search = ref("");
// const filterTableData = computed(() =>
//   deviceLogList.value.filter(
//     (data: any) =>
//       !search.value || data.brand.toLowerCase().includes(search.value.toLowerCase())
//   )
// );
</script>

<template>
  <div class="repairs-page">
    <div id="customerChart"></div>
    <div class="repairs-table">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="已处理" name="1"></el-tab-pane>
        <el-tab-pane label="待处理" name="2"></el-tab-pane>
        <el-tab-pane label="处理中" name="3"></el-tab-pane>
      </el-tabs>

      <!-- 搜索 -->
      <div class="search-input">
        <el-form :model="formitem" label-width="120px">
          <el-row :gutter="25">
            <el-col :span="4"
              ><el-input v-model="formitem.input1" placeholder="输入品牌"
            /></el-col>
            <el-col :span="4"
              ><el-input v-model="formitem.input2" placeholder="输入型号"
            /></el-col>
            <el-col :span="4"
              ><el-input v-model="formitem.input3" placeholder="部门"
            /></el-col>
            <el-col :span="6">
              <el-date-picker
                v-model="formitem.input4"
                type="dates"
                placeholder="选择时间"
              />
            </el-col>
            <el-col :span="6"
              ><el-button type="primary" @click="getsearch">搜索</el-button>
              <el-button type="success">重置</el-button></el-col
            >
          </el-row>
        </el-form>
      </div>

      <el-table
        :data="deviceLogList"
        class="app-table"
        size="small"
        height="100%"
      >
        <el-table-column
          label="序号"
          width="100"
          prop="device_id"
        ></el-table-column>
        <el-table-column label="品牌" prop="brand"></el-table-column>
        <el-table-column label="型号" prop="spec"></el-table-column>
        <el-table-column label="位置" prop="coordinate"></el-table-column>
        <el-table-column label="部门" prop="deptName"></el-table-column>
        <el-table-column label="售后" prop="dept_type">
          <template #default="scope">
            <span v-if="scope.row.dept_type == 'inner'" style="color: #eead0e"
              >内部</span
            >
            <span v-if="scope.row.dept_type == 'outer'" style="color: #8968cd"
              >外部</span
            >
            <span
              v-if="scope.row.dept_type == 'undefined'"
              style="color: #ff0000"
              >未设置售后</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="厂家联系电话"
          prop="factory_phone"
        ></el-table-column>
        <el-table-column label="时间" prop="gmt_create"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <span v-if="scope.row.status == 'normal'" style="color: #2fcc95"
              >正常</span
            >
            <span v-if="scope.row.status == 'repairing'" style="color: #ff7300"
              >维修中</span
            >
            <span v-if="scope.row.status == 'broken'" style="color: red"
              >报废</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="">
          <!-- 搜索 -->
          <template #default="scope">
            <el-button
            link type="primary"
              size="small"
              @click="deviceLogRecord(scope.row)"
              >维修记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right"
        layout="prev, pager, next"
        :page-size="deviceLogForm.pageSize"
        @current-change="deviceLogHandleCurrentChange"
        v-model:currentPage="deviceLogForm.page"
        :total="deviceLogTatal"
      >
      </el-pagination>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      width="500px"
      title="报修记录"
      v-model="innerVisible"
      append-to-body
    >
      <div style="min-height: 300px; max-height: 500px; overflow: auto">
        <el-collapse v-model="activeNames" class="record-list">
          <el-collapse-item
            :name="`collapse${index}`"
            :key="index"
            v-for="(item, index) in deviceLogRecordInfo"
          >
            <template #title>
              <span class="bx-status" :class="[item.status]">{{
                statusMap[item.status]
              }}</span>
              <h3>第{{ item.report_cnt }}次报修 {{ item.gmt_create }}</h3>
            </template>
            <div>
              <div>巡检员：{{ item.reportName }}</div>
              <div>上传图片</div>
              <div class="image_list">
                <el-image
                  fit="contain"
                  :key="i"
                  v-for="(image, i) in item.report_images"
                  class="image-item"
                  :src="image"
                  :preview-src-list="item.report_images"
                >
                </el-image>
              </div>
              <div>备注：{{ item.report_mark }}</div>
            </div>
            <div>
              <h3>售后时间：{{ item.gmt_modified }}</h3>
              <div>售后员：{{ item.repairName }}</div>
              <div>上传图片</div>
              <div class="image_list">
                <el-image
                  fit="contain"
                  :key="i"
                  v-for="(image, i) in item.repair_images"
                  class="image-item"
                  :src="image"
                  :preview-src-list="item.repair_images"
                >
                </el-image>
              </div>
              <div>备注：{{ item.repair_mark }}</div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <el-pagination
        style="text-align: right"
        layout="prev, pager, next"
        :page-size="20"
        @current-change="deviceLogInfoHandleCurrentChange"
        v-model:currentPage="deviceLogInfoForm.page"
        :total="deviceLogRecordInfoToast"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.repairs-page {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  #customerChart {
    width: 99%;
    height: 350px;
    // background: #fff;
  }
  .repairs-table {
    width: 100%;
    margin-top: 10px;
    height: calc(100% - 540px);
  }
}
.normal {
  background: #2fcc95;
}
.broken {
  background: red;
}
.repairing {
  background: #ff7300;
}
.bx-status {
  padding: 5px;
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
  line-height: 16px;
  color: #fff;
  font-size: 12px;
  margin-right: 10px;
}
.image_list .image-item {
  width: 80px;
  height: 80px;
  border: 1px dashed #ccc;
  margin: 10px;
}
.search-input {
  height: 45px;
  display: flex;
  .search-input-a {
    width: 120px;
    height: 30px;
    margin-left: 15px;
  }
}
</style>
